<!-- 1 脚本 -->
<script lang='ts' setup name='Login'>
import { ref, reactive } from 'vue';
import { Search, Goblet } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/stores/userInfo'


const router = useRouter()

console.log('useUserInfoStore', useUserInfoStore)

const store = useUserInfoStore()
console.log('store', store)



let form = reactive({
    username: 'admin',
    password: '123456'
})

function toLogin() {

    console.log('toLogin');

    if (form.username == 'admin' || form.username == 'root') {

        // window.localStorage
        sessionStorage.setItem("token", form.username)

        store.username = form.username

        //编程式导航
        router.push("/")
        //   router.replace("/")
    } else {

    }






}
</script>


<!-- 2 模板 -->
<template>

    <div class="container">

        <div class="form">
            <h3 style="text-align: center;">东软云医院管理系统</h3>

            <el-input class="input" :prefix-icon="Goblet" v-model="form.username" placeholder="请输入用户名"
                autocomplete="off"></el-input>
            <el-input class="input" :prefix-icon="Search" v-model="form.password" autocomplete="new-password"
                type="password" clearable placeholder="请输入密码"></el-input>
            <el-button class="btn" type="primary" @click="toLogin">登录</el-button>
        </div>

    </div>




</template>


<!-- 3 样式 -->
<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-color: rgb(232, 233, 233);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .form {
    width: 400px;
    height: 330px;
    /* border: solid 0.5px gray; */
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.container .form .input {
    height: 40px;
    width: 80%;

}

.container .form .btn {
    width: 80%;
    height: 40px;
    margin: 0 auto;
}
</style>